<template>
  <el-container>
    <PublicHeader style="box-shadow: 0 1px 10px 0 #dfdfdf;">
      <template slot="left" style="text-align: left;">
        <div style="margin-right: 15px; display: inline-block; padding: 10px; cursor:pointer;" @click="drawer = true">
          <i class="el-icon-s-operation"></i>
        </div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block">
          <el-breadcrumb-item :to="{ path: '/courseList' }">我的课堂</el-breadcrumb-item>
          <el-breadcrumb-item>成员</el-breadcrumb-item>
        </el-breadcrumb>

        <el-drawer
          :visible.sync="drawer"
          :direction="'ltr'"
          size="315px">
          <template slot="title">
            <div style="width: 96px">
              <img src="/static/logo/logo_blue.png" alt="logo" height="24px">
            </div>
          </template>
          <el-menu
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose">
            <el-menu-item style="width: 100%" v-for="(item, index) in menus" :key="index" @click="toNav(item.route)">
              <span slot="title">{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </el-drawer>
      </template>
      <template slot="right">
        <HeaderRight></HeaderRight>
      </template>
    </PublicHeader>
    <el-main>
      <div class="view-member">
        <!--                <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
                          <el-radio-button label="top">top</el-radio-button>
                          <el-radio-button label="right">right</el-radio-button>
                          <el-radio-button label="bottom">bottom</el-radio-button>
                          <el-radio-button label="left">left</el-radio-button>
                        </el-radio-group>-->

        <div class="viewCon">
          <div class="le"></div>
        </div>
        <el-tabs>
          <el-tab-pane label="全部成员">
            <el-tabs :tab-position="'left'" style="height: 100%;">
              <el-tab-pane label="教师团队">
                <div class="ri">
                  <div class="member-list">
                    <div class="head">
                      <div class="classRom">
                        <span class="name">教师团队</span>
                        <span>共{{ techTeam.length }}人</span>
                      </div>
                      <div class="rig" v-if="this.$store.getters.userInfo.usertype === 0">
                        <el-button type="primary" class="add">
                          <i class="el-icon-plus"></i>添加助教/老师
                        </el-button>
                        <!--                        <div class="add">-->
                        <!--                          <i class="el-icon-plus"></i>-->
                        <!--                        </div>-->
                      </div>
                    </div>
                    <div class="tab_view">
                      <div class="tab_option"></div>

                      <el-table
                        ref="multipleTable"
                        :data="techTeam"
                        tooltip-effect="dark"
                        style="width: 100%">
                        <el-table-column
                          type="selection">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="全部成员">
                          <!--                          <template slot-scope="scope">{{ scope.row.name }}</template>-->
                        </el-table-column>
                        <el-table-column
                          prop="account"
                          label="账号">
                          <!--                          <template slot-scope="scope">{{ scope.row.account }}</template>-->
                        </el-table-column>
                        <el-table-column
                          prop="position"
                          label="身份"
                          show-overflow-tooltip>
                          <!--                          <template slot-scope="scope">{{ scope.row.position === 0 ? '管理员' : '助教' }}</template>-->
                        </el-table-column>
                      </el-table>

                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="全部学生">
                <div class="stuHead">
                  <div class="classRom">
                    <span class="name">全部学生</span>
                    <span>共{{ stuTeam.length }}人</span>
                    <div class="rig"></div>
                  </div>
                  <div class="tab_view">
                    <div class="tab_option">
                      <el-table
                        ref="multipleTable"
                        :data="stuTeam"
                        tooltip-effect="dark"
                        style="width: 100%">
                        <el-table-column
                          type="selection">
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="全部成员">
                          <!--                          <template slot-scope="scope">{{ scope.row.name }}</template>-->
                        </el-table-column>
                        <el-table-column
                          prop="studentId"
                          label="学号">
                          <!--                          <template slot-scope="scope">{{ scope.row.studentId }}</template>-->
                        </el-table-column>
                        <el-table-column
                          prop="account"
                          label="账号">
                          <!--                          <template slot-scope="scope">{{ scope.row.account }}</template>-->
                        </el-table-column>
                        <el-table-column
                          prop="identity"
                          label="身份">
                          <!--                          <template slot-scope="scope">{{ scope.row.identity === 1 ? '学生' : '班委' }}}</template>-->
                        </el-table-column>
                        <el-table-column
                          prop="enterTime"
                          label="加入时间"
                          min-width="150px">
                          <!--                          <template slot-scope="scope">{{ scope.row.enterTime }}</template>-->
                        </el-table-column>
                        <el-table-column
                          label="群发私信">
                          <i class="el-icon-chat-dot-square"></i>
                        </el-table-column>
                        <el-table-column
                          label="删除成员"
                          show-overflow-tooltip>
                        </el-table-column>
                      </el-table>
                    </div>

                    <!--                    <div class="paginationList"></div>-->

                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane label="学生分组">学生分组</el-tab-pane>
        </el-tabs>
      </div>
    </el-main>
    <el-footer></el-footer>
  </el-container>
</template>

<script>
import PublicHeader from "../../components/PublicHeader";
import HeaderRight from "../../components/HeaderRight";

export default {
  name: "Member",
  components: {
    HeaderRight,
    PublicHeader

  },
  data() {
    return {
      drawer: false,
      menus: [
        {
          name: '我的课堂',
          route: '/courseList'
        },
        {
          name: '备课区',
          route: '/lessonPreparation'
        },
        {
          name: '论文管理',
          route: '/thesisDefense'
        }
      ],
      techTeam: [
        {
          name: '',
          account: '',
          position: ''
        }
      ],
      stuTeam: [
        {
          name: "",
          studentId: "",
          account: "",
          identity: 1,
          enterTime: ""
        }
      ]
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toNav(nav) {
      this.$router.push(nav)
    },
    getTeachTeam() {
      this.getRequest('/course/getTeacherList/' + this.$store.getters.courseId).then(resp => {
        console.log("tearesp", resp);
        if (resp.code === 200) {
          this.techTeam = resp.data
          for (let i = 0; i < resp.data.length; i++) {
            if (resp.data[i].position === 0) {
              this.techTeam[i].position = '管理员'
            } else {
              this.techTeam[i].position = '助教'
            }
          }
          /*          if (this.techTeam.position === 0) {
                      this.techTeam.position = '管理员'
                    } else {
                      this.techTeam.position = '助教'
                    }*/
        }
      })
    },
    getStuTeam() {
      this.getRequest('/course/getStudentList/' + this.$store.getters.courseId).then(resp => {
        console.log("sturesp", resp);
        if (resp.code === 200) {
          this.stuTeam = resp.data
          for (let i = 0; i < resp.data.length; i++) {
            if (resp.data[i].identity === 1) {
              this.stuTeam[i].identity = '学生'
            } else {
              this.stuTeam[i].identity = '班委'
            }
          }
        }
      })
    }
  },
  created() {
    this.getTeachTeam()
    this.getStuTeam()
  }
}
</script>

<style scoped>
.view-member {
  width: 1150px;
  height: 540px;
  margin: 0 auto;
}

.view-member .viewCon {
  display: flex;
}

/*.view-member .viewCon .le {
  position: absolute;
  top: unset;
  flex: 0 0 270px;
  width: 270px;
  height: min-content;
  border-radius: 8px;
  border: 1px solid #dadce0;
  margin-right: 25px;
  padding-bottom: 25px;
}*/

.view-member .viewCon .ri {
  flex: 1 1 0%;
  border-radius: 8px;
  border: 1px solid rgb(218, 220, 224);
  width: 850px;
  margin-left: 295px;
}

.member-list .head {
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.classRom {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: rgb(95, 99, 104);
  width: 100%;
  text-align: left;
}

.classRom .name {
  font-size: 20px;
  color: rgb(32, 33, 36);
  display: inline-block;
  margin-right: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.head .rig {
  display: flex;
  align-items: center;
  color: rgb(66, 133, 244);
}

.head .rig .add {
  width: 140px;
}


.member-list .tab_view {
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
}

.member-list .tab_view .tab_option {
  position: absolute;
  top: 13px;
  right: 47px;
  z-index: 10;
}

.member-list .paginationList {
  padding: 16px;
}

.stuHead {
  padding: 20px;
}
</style>
